<template>
  <div class="container">
    <div class="cardBox statisticsStyle">
      <leftTree ref="leftTree" :data="treeData" node-key="id" v-show="activeName !== '3'" :default-props="{children: 'children',label: 'customerName'}" search-key="customerName" width="200px" :default-expand-keys="defaultExpandKeys" :defalut-expand-all="true" @handleNodeClickAll="handleNodeClick" />

      <leftTree ref="leftTree" :data="treeData" node-key="id" v-show="activeName == '3'" :default-props="{children: 'children',label: 'classifyName'}" search-key="classifyName" width="200px" :default-expand-keys="defaultExpandKeys" :defalut-expand-all="true" @handleNodeClickAll="handleNodeClick" />
      <el-col id="right-content" class="right-content" :offset="0" :span="18">
        <div class="box-title">
          <el-breadcrumb separator="/" style="line-height:50px;">
            <el-breadcrumb-item v-for="(item,index) in breadcrumb" :key="index">{{ item }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <el-tabs v-model="activeName" type="border-card" tab-position="top" class="statisTab" @tab-click="handClick">
          <el-tab-pane label name="1">
            <span slot="label">
              <i class="el-icon-s-release" /> 销售订单按客户统计
            </span>
            <CustomerList ref="customerList" :fields="fields.CustomerList" />
          </el-tab-pane>
          <el-tab-pane label name="2">
            <span slot="label">
              <i class="el-icon-s-marketing" /> 销售订单及时完成率
            </span>
            <TimelyDeliveryRateList ref="timelyDeliveryRateList" :fields="fields.TimelyDeliveryRateList" />
          </el-tab-pane>
          <el-tab-pane label name="3">
            <span slot="label">
              <i class="el-icon-s-marketing" /> 销售订单按品种统计表
            </span>
            <SalesVariety ref="salesVariety" :fields="fields.SalesVarietyTab" />
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </div>
  </div>
</template>
<script>
import CustomerList from './CustomerList'
import TimelyDeliveryRateList from './TimelyDeliveryRateList'
import SalesVariety from './SalesVariety'
import leftTree from '@/components/LeftTree'
import { getCustomerListApi } from '@/api/public'
export default {
  components: {
    leftTree,
    CustomerList,
    TimelyDeliveryRateList,
    SalesVariety
  },
  data() {
    return {
      treeData: [],
      defaultExpandKeys: ['-1'],
      breadcrumb: [],
      activeName: '1',
      fields: {
        CustomerList: [],
        TimelyDeliveryRateList: [],
        SalesVarietyTab: []
      }
    }
  },
  computed: {},
  created() {},
  watch: {},
  async mounted() {
    await this.initFields()
    if (this.activeName !== '3') {
      await this.getList()
    }
  },
  methods: {
    /**
     * @description: 查询所有客户
     * @return {*}
     */
    async getList() {
      this.treeData = []
      this.$nextTick(async () => {
        this.breadcrumb = ['客户目录']
        const res = await getCustomerListApi()
        if (res?.data.code === 200) {
          this.treeData = [
            { id: '-1', customerName: '客户目录', children: res.data.data }
          ]
        }
      })
    },
    /**
     * @description: 查询所有物料
     * @return {*}
     */
    async classfyList() {
      this.treeData = []
      this.$nextTick(async () => {
        this.breadcrumb = ['物料分类目录']
        const res = await this.$axios.get('/material/classify/list')
        this.treeData = [
          { id: '-1', classifyName: '物料分类目录', children: res.data.data }
        ]
      })
    },
    /**
     * @description: 树节点点击
     * @param {*} data
     * @param {*} node
     * @return {*}
     */
    handleNodeClick({ data, node }) {
      let treeStr = ''
      if (this.activeName == '3') {
        this.breadcrumb = []
        this.returnNodeLabel(node.parent)
        this.breadcrumb.push(data.classifyName)
        treeStr =
          data.classifyName === '物料分类目录' ? '-1' : data.classifyName
      } else {
        this.breadcrumb = []
        this.returnNodeLabel(node.parent)
        this.breadcrumb.push(data.customerName)
        treeStr = data.customerName === '客户目录' ? '-1' : data.customerName
      }
      if (this.activeName == '1') {
        this.$refs['customerList'].getInfo(treeStr)
      } else if (this.activeName == '2') {
        this.$refs['timelyDeliveryRateList'].getInfo(treeStr)
      } else {
        this.$refs['salesVariety'].getInfo(treeStr)
      }
    },
    /**
     * @description: 递归获取名称
     * @param {*} node
     * @return {*}
     */
    returnNodeLabel(node) {
      if (node.parent) {
        if (this.activeName == '3') {
          this.breadcrumb.unshift(node.data.classifyName)
        } else {
          this.breadcrumb.unshift(node.data.customerName)
        }
        this.returnNodeLabel(node.parent)
      }
    },
    initFields() {
      const obj = {
        CustomerList: [],
        TimelyDeliveryRateList: [],
        SalesVarietyTab: []
      }
      this.fieldList.forEach((item) => {
        item.code.includes('@1') && obj.CustomerList.push(item)
        item.code.includes('@2') && obj.TimelyDeliveryRateList.push(item)
        item.code.includes('@3') && obj.SalesVarietyTab.push(item)
      })
      this.fields = obj
    },
    async handClick(tab) {
      if (tab.name === '3') {
        this.classfyList()
      } else {
        this.getList()
      }
    }
  }
}
</script>
<style lang='scss' scoped>
.container {
  padding: 10px;
}
</style>

<style lang='scss' >
.statisticsStyle {
  .el-tabs--border-card {
    margin-top: 10px;
    // border: none !important;
    box-shadow: none !important;
  }
}
.statisTab {
  .el-tabs__header {
    margin: 0 0 5px;
    .el-tabs__item {
      height: 34px;
      line-height: 34px;
    }
  }
  .el-tabs__content {
    padding: 5px !important;
  }
}
</style>
